<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

import zhishu from '@assets/zhishu.png'
import ziyuan8 from '@assets/z8.png'

export default {
  name: 'chart-customized-graph-img',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'line'
    }
  },

  computed: {
    option () {
      let vm = this
      let imgurl = 'image://' + zhishu
      let data = []
      this.data.forEach((node, index) => {
        let itemStyle = {
          color: vm.colors[index]
        }
        let lineStyle = {
          opacity: 1,
          width: 3,
          color: node.color2,
          curveness: 0
        }
        let label = {
          show: true,
          formatter: function (params) {
            let value = params.data.name
            value = `${value.slice(0, 2)}\n${value.slice(2)}`;
            return value
          },
          textStyle: {
            fontSize: node.fontSize,
            lineHeight: parseInt(node.fontSize) + 5,
            fontWeight: 700,
            color: '#fff'
          }
        }
        let symbolSize = 100
        let symbol = null

        if (node.category === 0) {
          symbolSize = 60
        } else if (node.category === 1) {
          symbolSize = 60
        } else if (node.category === 2) {
          symbolSize = 10
          // label.position = "bottom"
        }

        itemStyle.color = new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
          offset: 0,
          color: node.color1
        },
        {
          offset: 1,
          color: node.color2
        }])

        if (node.name === '') {
          symbol = imgurl
        }
        data.push({
          ...node,
          x: 0,
          y: 0,
          // draggable: true,
          symbol: symbol,
          label: label,
          lineStyle: lineStyle,
          itemStyle: itemStyle
        })
      })

      let series = [{
        type: 'graph',
        layout: 'force',
        symbol: "circle",
        // symbolSize: 60,
        width: this.seriesWidth,
        height: this.seriesWidth,
        // roam: true, //禁止用鼠标滚轮缩小放大效果
        edgeSymbol: ['circle', 'none'],
        edgeSymbolSize: [0, 10],
        // 连接线上的文字
        focusNodeAdjacency: false, //划过只显示对应关系
        lineStyle: {
          opacity: 1,
          width: 1,
          // color:'#f4f4f4',
          curveness: 0
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0,1, [{
                     offset: 0,
                     color: '#fff'
                 },
                 {
                     offset: 0,
                     color: '#35c2ff'
                 },
                 {
                     offset: 1,
                     color: '#157eff'
                 }])
        },
        // 圆圈内的文字
        label: {
          show: true,
          // position:'bottom',
          textStyle: {
            // color: '#000'
          }
        },
        force: {
          repulsion: parseFloat(this.repulsion),
          edgeLength: parseFloat(this.edgeLength)
        },
        data: data,
        links: this.datalink
      }]


      return {
        color: this.colors,
        animation: false,
        // grid: grid,
        // {
        //   show: this.showGrid,
        //   left: this.gridLeft === '' ? 'auto' : this.gridLeft,
        //   top: this.gridTop === '' ? 'auto' : this.gridTop,
        //   right: this.gridRight === '' ? 'auto' : this.gridRight,
        //   bottom: this.gridBottom === '' ? 'auto' : this.gridBottom,
        //   borderWidth: 0,
        //   containLabel: true
        // },
        tooltip: {
          show: false,
          trigger: this.triggerType,
          confine: this.confine,
          extraCssText: this.confine ? 'white-space: normal; word-break: break-all;' : '',
          formatter: this.useTooltipFun ? this.tooltipFunction : this.tooltipLabel
        },

        // xAxis: this.showAxis ? xAxis : null,
        // yAxis: this.showAxis ? yAxis : null,
        // dataset: {
        //   source: this.data
        // },
        series: series
      }
    }
  },

  methods: {
    setSeries () {
      // console.log(this.option)
    },
    setOption () {
      if (this.data.length > 0) {
        this.chart.setOption(this.option, true)
        if (this.useLiandong) {
          this.chart.off('click')
          this.chart.on('click', this.handleclick)
        }
        this.resize()
      }
    },
    handleclick (params) {
      console.log(params)
      if (params.name !== '') {
        this.$emit('input', params.name)
        this.$emit('change', params.name)
      }
    },
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },

    isSmooth () {
      this.setSeries()
    },

    areaStyle () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
